<template>
  <div class="aside">
    <div class="userInfo">
      <img :src="info.headImg" alt="" width="100" height="100" />
      <div class="userInfo__name">
        <span>{{ info.nickName }}</span>
        <span @click="quitLogin">[ 退出 ]</span>
      </div>
    </div>
    <div class="select">
      <div class="select__title">
        <img src="../assets/img/transaction.png" alt="" />
        <span>交易管理</span>
      </div>
      <ul class="select__content">
        <li
          v-for="(item, index) in list1"
          :key="index"
          :class="{ current: item.path == $route.path }"
          @click="change1(item.path)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="select">
      <div class="select__title">
        <img src="../assets/img/transaction.png" alt="" />
        <span>个人信息管理</span>
      </div>
      <ul class="select__content">
        <li
          v-for="(item, index) in list2"
          :key="index"
          :class="{ current: index == num2 }"
          @click="change2(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  name: "UserAside",
  data() {
    return {
      list1: [
        { title: "个人中心", path: "/user/userinfo" },
        { title: "我的订单", path: "/user/orderlist" },
        { title: "购物车", path: "/user/cart" },
        { title: "消息通知", path: "/user/notice" },
        { title: "鸡腿明细", path: "/user/drumsticknum" },
        { title: "鸡腿攻略", path: "/user/drumstickraiders" },
      ],
      list2: ["地址管理", "账号管理"],
      num2: 0,
    };
  },
  computed: {
    ...mapState("userModule", ["info"]),
  },
  methods: {
    ...mapMutations("loginStatus", ["changeIsShowCart"]),
    ...mapActions("userModule", ["getUserInfo"]),
    change1(path) {
      router.push(path);
    },
    change2(index) {
      this.num2 = index;
      // 没有这个页面跳转错误页面
      router.push(index);
    },
    quitLogin() {
      localStorage.removeItem("x-auth-token");
      this.changeIsShowCart(false);
      // 路径更换在topbar里面会重新获取用户信息, 此处不再获取
      // this.getUserInfo();
      router.push("/home");
    },
  },
};
</script>

<style lang='less' scoped>
.aside {
  display: inline-block;
  width: 200px;
  height: 740px;
  box-sizing: border-box;
  padding: 16px;
  background-color: #e7e7e7;
  .userInfo {
    padding-top: 13px;
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      border: 1px solid #fff;
    }
    &__name {
      padding-top: 17px;
      font-size: 14px;
      span {
        &:nth-of-type(1) {
          margin-right: 7px;
        }
        &:nth-of-type(2) {
          color: blue;
          cursor: pointer;
        }
      }
    }
  }
  .select {
    padding-top: 44px;
    &__title {
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        color: #333;
        margin-left: 8px;
      }
    }
    &__content {
      display: flex;
      flex-direction: column;
      li {
        margin-top: 16px;
        color: #666;
        line-height: 20px;
        font-size: 14px;
        cursor: pointer;
        &.current {
          padding-left: 10px;
          border-left: 1px solid blue;
          color: blue;
        }
      }
    }
  }
}
</style>